Este menu se comporta da seguinte maneira:
Ao carregar a página, aparece no canto superior esquerdo uma pequena imagem que, quando clicada, faz surgir um menu no formato de barra horizontal. Quando se clica na imagem novamente ele retorna à posição original, escondido.
Instruções:
Mantenha os arquivos sempre na mesma pasta da página que irá utilizar o menu, tanto as imagens quanto o arquivo de scripts (scriptMenu.js).
Para usar o menu, chame a função drawMenu(). O modo mais prático é colocar no evento onLoad da tag BODY, como na página de exemplo.
Os parâmetros da função drawMenu() são:
showMenu.png: é a imagem que aparece quando o menu é exibido. Você pode trocar.
hideMenu.png: é a imagem mostrada quando o menu está escondido. Também pode ser trocada.
Programas: é o texto que aparece quando você coloca o mouse em cima da imagem. Pode ser trocado.
Programas|Configurações|Fechar sessão: são as opções do menu. No exemplo é apenas texo, mas pode ser qualquer coisa, imagens, links, botões, imagens e links, etc.
// JavaScript Document
function clickMenu(hideMenu,showMenu){
var menu=document.getElementById('hideMenu');
var img=document.getElementById('imgMenu');
if(menu.style.visibility=='visible'){
menu.style.visibility='hidden';
menu.style.display='none';
img.src=showMenu;
}else{
menu.style.visibility='visible';
menu.style.display='inline';
img.src=hideMenu;
}
}
function drawMenu(showMenu,hideMenu,labelMenu,optionMenu){
var styleMenu='<style type="text/css">#hideMenu {display: none;visibility: hidden;border: thin solid #FF0000;}#showMenu {display: inline;visibility: visible;}#mainMenu {position: relative; z-index: 9999; left: 1px; top: 1px; vertical-align: middle;}</style>';
document.body.innerHTML+=styleMenu;
var Menu='<div id="mainMenu"><div id="hideMenu">'+optionMenu+'</div><div id="showMenu"><img src="'+showMenu+'" name="'+labelMenu+'" width="20" height="20" hspace="0" vspace="0" border="0" align="absmiddle" id="imgMenu" onClick="clickMenu(\''+hideMenu+'\',\''+showMenu+'\')"></div></div>';
var newBody;
var Body=document.body.innerHTML;
newBody=Menu+Body;
document.body.innerHTML=newBody;
}